<template>
  <div id="address">
       <section class="order-main-header">
            <mt-header :title="operating">
            <mt-button  icon="back" slot="left" @click="back()"></mt-button>
             <mt-button  slot="right" ><span @click="openAttrWin(0)" v-if="!attrWinStatus" style="margin-right:20px;">添加</span></mt-button>
            </mt-header>
        </section>
    <div class="main" v-if="!attrWinStatus">
        <div class="coin-l">
            <span class="coin-i" v-for="(item,index) in coinList[0]" :key="index" :data-num="coinList[1][index]" :class="{'active': activeNum == index+1}" @click="tabOpt($event,index)">{{item}}</span>
        </div>
        <div class="address-list">
            <div class="val-input" v-for="(item,index) in addressListByCoin" :key="index">
               
                <span class="val-m">{{item.address}}</span>
                 <span class="val-r" @click="detAttrWin(item)">删除</span>
                <span class="val-r" @click="openAttrWin(item)">编辑</span>
            </div>
        </div>
    </div>
    <div class="main" v-if="attrWinStatus">
        <div class="val-input">
            <span class="val-i-left">币种</span>
            <select name="" id="" v-model="selectVal" @change="chooseCoin()">
                <option value="0">请选择币种</option>
                <option v-for="(item,index) in coinList[0]" :value="coinList[1][index]" :key="index">{{item}}</option>
            </select>
        </div>
        <div class="val-input" v-show="!lineDisable">
            <span class="val-i-left">链类型</span>
            <select name="" v-model="lineType" :disabled="lineDisable" @change="chooseLine">
                <option value="0">请选择链类型</option>
                <option value="1">OMNI</option>
            </select>
        </div>
        <div class="val-input">
            <span class="val-i-left">备注</span>
            <input class="val-i-input" type="text" placeholder="请输入提币地址备注" v-model="addrFlag">
        </div>
        <div class="val-input">
            <span class="val-i-left">地址</span>
            <input class="val-i-input" type="text" placeholder="请输入提币地址" v-model="addressText">
        </div>
        <div class="val-input">
            <span class="val-i-left">{{sessionData}}: </span>
            <input class="val-i-input val-i-code" type="text" placeholder="请输入验证码" v-model="code">
            <button @click="sendCode" :style="btnColor">{{sendCodeText}}</button>
        </div>
        <button class="sureBtn" :disabled="btnOff" :class="{'acti': !btnOff}" @click="sureAddr">确认</button>
    </div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';//导入toast组件
export default {
    data() {
        return{
            coinList:[
                [],[]
            ],
            activeNum:1,
            addressList:[
                
            ],
            activeOpt:[

            ],
            attrWinStatus: false,
            selectVal:0,
            lineType:0,
            addrFlag:'',
            addressText:'',
            sendCodeText:'发送',
            btnColor:'color:#5298F1',
            code:'',
            clearTime: false,
            sessionData:'',
            operating:'提币地址管理',
            addressListByCoin:'',
            activeNumId:"",
            openAttrWinType:'',
            lineDisable:false,
        }
    },
    computed: {
        btnOff: function() {
            return !this.selectVal || !this.lineType || !this.addressText || !this.code
        }
    },
    methods:{
        tabOpt(ev,index) {
            let id = ev.target.dataset.num
            this.activeNum = index+1;
            this.activeNumId=id;
            this.activeOpt = this.addressList[index]
            this.getAddressByCoin(id)
        },
        openAttrWin(data){
            this.code = ''
            this.activeId = data.id
            this.attrWinStatus = true;
            this.addrFlag='';
            this.selectVal=0;
            this.lineType=0;
            if(data == 0){
                this.addressText='';
                this.openAttrWinType=0;
            }else{
                this.selectVal = this.activeNumId
                this.lineType = 1
                this.addrFlag = data.flag
                this.addressText = data.address;
                this.openAttrWinType=1;
            }
        },
        sendCode() {
                if(!isNaN(this.sendCode)){
                    return ;
                }
            this.clearTime = false
            this.$http.post('/v1/account/sendCode').then(res=>{
                res = res.data
                if(res.code == 200){
                    this.sendCodeText = 60
                    this.btnColor = 'color:#666'
                    var timeId = setInterval(function(){
                        this.sendCodeText--
                        if(this.sendCodeText == 0 || this.clearTime){
                            clearInterval(timeId)
                            this.btnColor = 'color:#5298F1'
                            this.sendCodeText = '发送'
                        }
                    }.bind(this),1000)
                }
            }).catch(err=>{

            })
        },
         back() {
            if(this.attrWinStatus){
                 this.attrWinStatus = false
               this.getCoinList();
                 this.operating="提币地址管理";
            }else{
                this.$router.go(-1);
            }
        },
        getCoinList() {
            this.coinList = [
                [],[]
            ],
            this.$http.get('/v1/coinList').then(res=>{
                res = res.data;
                if(res.code == 200){
                    for(let i=0;i<res.data.length;i++){
                        this.coinList[0].push(res.data[i].name)
                        this.coinList[1].push(res.data[i].id);
                    }
                  this.getAddressByCoin( this.coinList[1][0])
                }
            }).catch(err=>{

            })
        },
        getAddressByCoin(id){ 
            this.activeNumId=id;
            this.$http.get('/v1/account/getAddressByCoin?id='+id).then(res=>{
                res = res.data
                    if(res.code == 200){
                 this.addressListByCoin=res.data
                }
            }).catch(err=>{
            })
        },
        detAttrWin(res){
                this.$http.get('/v1/account/deleteAddress?id='+res.id).then(res=>{
                res = res.data
                    if(res.code == 200){
                        Toast('删除成功');
                        this.getCoinList();
                }
            }).catch(err=>{
            })

        },
        sureAddr() {
            console.log(this.coinList)
            console.log(this.selectVal)
            console.log(this.lineType)
           let url=this.openAttrWinType =='0'?'addAddress':'updateFlag';
           let id=this.openAttrWinType =='0'?this.selectVal:this.activeId;
            let formData = {
                id:id,
                flag: this.addrFlag,
                address: this.addressText,
                code:this.code
            }
            this.$http.post('/v1/account/'+url,formData).then(res=>{
                res = res.data
                if(res.code == 200){
                    this.back()
                    this.clearTime = true;
                    if(this.openAttrWinType =='0'){
                             Toast('添加成功')
                    }else{
                    Toast('修改成功');
                    }
                }else if(res.code == 100){
                    Toast('请发送验证码')
                }else if(res.code == 101){
                    Toast('发送验证码频繁，请2小时候再试')
                }else if(res.code == 102){
                    Toast('验证码错误，剩余可尝试次数为'+res.data+'次')
                }else if(res.code == 1){
                    Toast('用户信息异常，请重新登入')
                }
            })
        },
        handleClose(){
            this.$router.go(-1);
        },
        chooseCoin(){
            if(this.selectVal == 0){
                this.lineDisable = 0
                this.lineDisable = false
                this.lineType = 0
                this.selectVal = 0
                return
            }
            this.lineType = 1
            for(let i=0;i<this.coinList[0].length;i++){
                if(this.selectVal == this.coinList[1][i] && this.coinList[0][i] == 'USDT'){
                    console.log(this.coinList[0][i])
                    i = this.coinList[0].length
                    this.lineDisable = false
                }else{
                    this.lineDisable = true
                }
            }
            console.log(this.lineDisable)
        },
        chooseLine(){
            if(this.lineType == 0){
                this.lineType = 0
            }
        }
    },
    mounted() {
        this.getCoinList();
         this.$http.post('/v1/session?'+ new Date().getTime(),{}).then(res=>{
            res = res.data
            if(res.code == 200){
                 if(res.data.loginName.search("@")>-1){
                 this.sessionData="邮箱验证码";
            }else{
                 this.sessionData="短信验证码";
            }
            }
        })
    }
}
</script>

<style lang='less' scoped>
    .user-top {
        height: 110px;
        line-height: 110px;
        padding: 0 60px;
        border-bottom: 2px solid #161736;
        color:#8686C0;
    }
    .main{
        padding: 0 30px;
        color: #8686C0;
        .coin-l{
            width: auto;
            overflow-x: auto;
            white-space: nowrap;
            .coin-i{
                padding:0 10px;
                margin: 25px 20px 22px 0;
                line-height: 46px;
            }
            .active{
                border: 1px solid #3381ff;
            }
        }
        .val-input{
            height: 93px;
            line-height: 93px;
            border-bottom: 2px solid #161736;
            display: flex;
            .val-t{
                width: 69px;
                font-size: 28px;
                color:#8686C0;
                overflow: hidden;
            }
            .val-m{
                font-size: 22px;
                width: 550px;
                overflow: hidden;
            }
            .val-r{
                width: 80px;
                text-align: right;
                font-size: 24px;
                color: #3381ff;
            }
            input{
                line-height: 93px;
                border:none;
                background:none;  
                outline:none;  
                font-size: 30px;
                padding-left: 20px;
                color: #8686C0;
                width: 500px;
            }
            .input-code{
                flex: 1;
            }
            .codeBtn{
                width: 58px;
                text-align: center;
                font-size: 24px;
            }
            input:focus{   
                border:none;
            }
            .val-i-left{
                width: 180px;
            }
            select{
                width: 420px;
                outline: none;
                border: none;
                font-size: 24px;
                background: none;
                color: #8686C0;
            }
            option{
                font-size: 24px;
            }
            .val-i-input{
                font-size: 24px;
                padding-left: 0;
            }
            .val-i-code{
                width: 430px;
            }
            button{
                width: 80px;
                font-size: 24px;
            }
            .lineDisable{
                color:#aaaaaa;
            }
        }
        .sureBtn{
            background: #ccc;
            color: #fff;
            border-radius: 10px;
            font-size: 28px;
            margin-top: 58px;
            width: 686px;
            height: 86px;
        }
        .acti{
            background: #5298F1;
        }
    }
     .mint-header {
    height: 100px;
    font-size: 32px;
    background: #161736;
    color: #E0E0F9;
}
#address{
    ::-webkit-input-placeholder {
    color: #8686C0;
    font-size: 28px
}

:-moz-placeholder,::-moz-placeholder {
    color: #8686C0;
    font-size: 28px
}

:-ms-input-placeholder {
    color: #8686C0;
    font-size: 28px
}
}
</style>